<template>
    <div class="container">
        <Header></Header>
        <div class="content">
            <!-- 活动介绍 -->
            <div>
                <img class="activeIntroduced" src="./images/title_introduced1.png" alt="活动介绍">
                <div class="activeIntroducedText">
                    &emsp;&emsp;韶韶華杯青少年美育系列活动是由韶華杯青少年美育系列活动组委会主办，由北京文学期刊中心《东方少年》杂志出版指导，
                    由中华儿童文化艺术促进会素质人才教育工作委员会和华夏文化促进会青少年艺术工作委员会为活动支持单位，由北京央美美育艺术发展中心承办，
                    面向全国广大青少年以及艺术爱好者展开的专业级全国性质的社会实践艺术活动，该活动通过弘扬爱国主义精神，践行并激励广大青少年通过创作书法、绘画、手工、摄影、征文、写作、诗歌、朗诵等美育作品，
                    弘扬中华优秀传统文化，发扬爱国主义精神，加强青少年交流学习，促进华夏文化的传承与发展，在参与社会实践的同时推动全民美育素质提高，引导青少年感受华夏文化内涵精神，以自己的独特的视角，
                    通过书法、绘画、手工、摄影、征文、写作、诗歌、朗诵等形式来表达自己对于童年和青春的理解和传承，激发青少年爱国主义精神，为祖国的繁荣昌盛贡献自己的力量。
                </div>
            </div>
            <!-- 组织机构 -->
            <div>
                <img class="activeIntroduced" src="./images/title_introduced2.png" alt="组织机构">
                <div class="organItem">
                    <h3>主办单位</h3>
                    <div class="organText">
                        韶華杯青少年美育系列活动组委会
                    </div>
                    <!-- <div class="organText">
                        素质人才教育工作委员会
                    </div> -->
                </div>
                <div class="organItem">
                    <h3>支持单位</h3>
                    <div class="organText">
                        华夏文化促进会青少年艺术工作委员会
                    </div>
                    <div class="organText">
                        中华儿童文化艺术促进会素质人才教育工作委员会
                    </div>
                </div>
                <div class="organItem">
                    <h3>出版指导单位</h3>
                    <div class="organText">
                        北京文学期刊中心《东方少年》杂志
                    </div>
                </div>
                <div class="organItem">
                    <h3>承办单位</h3>
                    <div class="organText">
                        北京央美美育艺术发展中心
                    </div>
                </div>
            </div>
            <!-- 证书 -->
            <div class="cert">
                <img @click="lookBigImg('/images/intorduced_cert1.jpg')" src="/images/intorduced_cert1.jpg" alt="华夏文化促进会通知">
                <img @click="lookBigImg('/images/intorduced_cert2.jpg')" src="/images/intorduced_cert2.jpg" alt="北京央美美育艺术发展中心通知">
                <img @click="lookBigImg('/images/intorduced_cert3.jpg')" src="/images/intorduced_cert3.jpg" alt="2025第三届韶华杯通知">
                <img @click="lookBigImg('/images/intorduced_cert4.jpg')" src="/images/intorduced_cert4.jpg" alt="中华儿童文化艺术促进会通知">
            </div>
            <div class="footer">
                <Footer></Footer>
            </div>
        </div>

        <!-- 查看证书（大图） -->
        <div class="certBig" v-if="certBig" @click="certBig = false">
            <img :src="certBigImg" alt="通知函">
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '../../components/Header/Header.vue';

export default {
    name: 'introduced',
    components: {
        Header, Footer
    },
    data() {
        return {
            certBig: false,
            certBigImg: '',
        }
    },
    mounted() {

    },
    methods: {
        lookBigImg(src) {
            this.certBig = true;
            this.certBigImg = src;
        }
    }
}
</script>
<style scoped>
.content {
    width: 100%;
    text-align: center;
    background-size: 100% 100%;
    background-image: url('./images/background.png');
}

.activeIntroduced {
    width: 20vw;
    margin-top: 10vw;
}

.activeIntroducedText {
    width: 75%;
    margin: 0 auto;
    margin-top: 5vw;
    text-align: left;
    letter-spacing: 8px;
    font-size: 26px;
    line-height: 65px;
}

.organItem {
    width: 100%;
    margin-top: 5vw;
}

h3 {
    font-size: 35px;
    font-weight: normal;
    color: #BF272D;
    letter-spacing: 8px;
}

.organText {
    font-size: 35px;
    margin-top: 1vw;
    letter-spacing: 8px;
}

.cert {
    margin-top: 5vw;
}

.cert img {
    width: 20vw;
    transition: transform 0.3s ease;
    margin: 5px;
    box-shadow: 5px 5px 5px #888888;
}

.cert img:hover {
    cursor: pointer;
    transform: translateY(-10px);
}

.footer {
    width: 100%;
    height: 10vw;
    margin-top: 5vw;
}

.certBig {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.certBig img {
    height: 80vh;
}

/* 手机/小屏幕 */
@media (max-width: 960px) {
    .content {
        /* height: 300vw; */
        background-image: url('./images/background_phone.png');
    }

    .activeIntroduced {
        width: 40vw;
    }

    .activeIntroducedText {
        width: 85%;
        font-size: 12px;
        letter-spacing: 3px;
        line-height: 25px;
    }

    .organItem {
        width: 100%;
        margin-top: 5vw;
    }

    h3 {
        font-size: 15px;
        letter-spacing: 3px;
    }

    .organText {
        font-size: 15px;
        margin-top: 2vw;
        letter-spacing: 3px;
    }

    .cert img:hover {
        transform: translateY(-5px);
    }

    .certBig img {
        width: 80%;
        height: auto;
    }

    .footer {
        height: 25vw;
        margin-top: 3vw;
    }
}
</style>